<template>

  <div class="dashboard-editor-container" id="content">
    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
      <el-form-item label="查询方式" prop="type">
        <el-select
          v-model="queryParams.type"
          placeholder="请选择"
          clearable
          size="small"
          style="width: 240px"
          v-on:change="init"
        >
          <el-option
            v-for="dict in typeOptions"
            :key="dict.type"
            :label="dict.label"
            :value="dict.type"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="查询年月" prop="provinceId" v-show="queryParams.type == 3">
        <el-date-picker
          v-model="queryParams.quertDate"
          type="month"
          v-on:change="init"
          placeholder="选择月">
        </el-date-picker>
      </el-form-item>
    </el-form>

    <div class="echartsLayout">
      <div class="echartsTitle">{{agentName}} 代理商推荐注册统计</div>
      <el-row>
        <el-col :span="16">
          <div id="tview1" class="echarts1"></div>
        </el-col>
        <el-col :span="8">
          <div id="tview11" class="echarts1"></div>
        </el-col>
      </el-row>
    </div>

    <div class="echartsLayout">
      <div class="echartsTitle">{{agentName}} 代理商推收益统计</div>
      <el-row>
        <el-col :span="16">
          <div id="tview2" class="echarts1"></div>
        </el-col>
        <el-col :span="8">
          <div id="tview22" class="echarts1"></div>
        </el-col>
      </el-row>
    </div>

    <div class="echartsLayout">
      <div class="echartsTitle">{{agentName}} 代理商推荐用户消费统计</div>
      <el-row>
        <el-col :span="16">
          <div id="tview3" class="echarts1"></div>
        </el-col>
        <el-col :span="8">
          <div id="tview33" class="echarts1"></div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
  import {
    statisticsAll
  } from "@/api/agent/statistics";
  import echarts from '@/utils/echarts.min.js'
  import {parseTime} from '@/utils/ruoyi'

  export default {
    name: "statistics",
    data() {
      return {
        agentName: "所有",
        typeOptions: [
          {type: 1, label: "今日"},
          {type: 2, label: "本月"},
          {type: 3, label: "指定年月"}
        ],
        agent: null,
        queryParams: {
          agentId: null,
          type: 1,
          quertDate: new Date()
        }
      }
    },
    mounted() {
      this.queryParams.agentId = this.$route.params && this.$route.params.agentId;
      if (this.queryParams.agentId != null) {
        this.agentName = ""
      }
      this.init();
    },
    methods: {
      init() {
        let tview1 = echarts.init(document.getElementById('tview1'));
        let tview11 = echarts.init(document.getElementById('tview11'));
        let tview2 = echarts.init(document.getElementById('tview2'));
        let tview22 = echarts.init(document.getElementById('tview22'));
        let tview3 = echarts.init(document.getElementById('tview3'));
        let tview33 = echarts.init(document.getElementById('tview33'));
        let _this = this;
        const loading = this.$loading({
          target: document.querySelector("#content"),
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
        });
        statisticsAll({
          agentId: this.queryParams.agentId,
          type: this.queryParams.type,
          quertDate: parseTime(this.queryParams.quertDate)
        }).then(response => {
          _this.agent = response.data.agent;
          if (_this.agent != null) {
            _this.agentName = _this.agent.agentName;
          }
          tview1.setOption(response.data.regOption);
          tview11.setOption(response.data.regOptionPie);
          tview2.setOption(response.data.incomeOption);
          tview22.setOption(response.data.incomeOptionPie);
          tview3.setOption(response.data.payOption);
          tview33.setOption(response.data.payOptionPie);
          loading.close();
        }, error => {
          loading.close();
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .dashboard-editor-container {
    padding: 32px;
    background-color: rgb(240, 242, 245);
    position: relative;

    .chart-wrapper {
      background: #fff;
      padding: 16px 16px 0;
      margin-bottom: 32px;
    }

    .echartsLayout {
      background: #fff;
      margin-top: 20px;
      padding-top: 20px;
      border-radius: 10px;
      box-shadow: 1px 1px 5px #aaa;

      .echartsTitle {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        font-size: 25px;
        color: #333;
        font-weight: bold;
      }

      .echarts1 {
        margin-top: 20px;
        width: 100%;
        height: 300px;
      }

    }
  }

</style>

